<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
      <button @click="goToDemo01(1)">go demo01</button>
      <button @click="goToDemo02">go demo02</button>
    </view>
    <!-- open-type="reLaunch" 表示可以跳转到 tabbar 页面 -->
    <navigator open-type="reLaunch" :url="`/pages/demo03/demo03?aaa=${title}`">
      <button>go demo03</button>
    </navigator>
    <button @click="showToastFn">showToast</button>
    <button @click="showModalFn">showModal</button>
    <button @click="goToDemo04">go demo04</button>
  </view>
</template>

<script setup>
  import {
    ref
  } from "vue";

  const title = ref("Hello NB1")

  const showModalFn = () => {
    uni.showModal({
      title: 'wc?',
      content: '确定要卧槽?',
      editable: true,
      showCancel: false
    })
  }

  const showToastFn = () => {
    uni.showToast({
      title: "wc",
      icon: "error",
      mask: true,
      duration: 3000
    })
  }

  const goToDemo01 = (a) => {
    console.log(a);
    uni.navigateTo({
      url: "/pages/demo01/demo01"
    })
  }

  const goToDemo02 = () => {
    let obj = {
      a: 1,
      b: 'wc'
    }
    uni.navigateTo({
      url: `/pages/demo02/demo02?obj=${JSON.stringify(obj)}`
    })
  }

  const goToDemo04 = () => {
    uni.navigateTo({
      url: "/pages/demo04/demo04"
    })
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
